<!doctype html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<body>
	<section class="content-header">
		<h1>
			文章 <small>文章列表</small>
		</h1>
		<ol class="breadcrumb">
			<li><a href="javascript:;"><i class="fa fa-newspaper-o"></i> 内容管理</a></li>
			<li class="active">文章列表</li>
		</ol>
	</section>

	<section class="content">
		<div class="row">
			<div class="col-md-3">
				<div class="box box-solid">
					<div class="box-header with-border">
						<h3 class="box-title">文章分类</h3>
					</div>
					<div class="box-body">
						<div id="tree_view"></div>
					</div>
				</div>
			</div>
			<div class="col-md-9">
				<div class="mailbox-controls">
					<div class="btn-group btn-group-sm">
						<a class="btn btn-primary" href="#/page/content/article/add"> <i class="fa fa-plus"></i> 添加
						</a>
						<button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-primary dropdown-toggle"
							type="button">
							批量 <span class="fa fa-caret-down"></span>
						</button>
						<ul class="dropdown-menu">
							<li><a href="javascript:;" id="delete-button"> <i class="glyphicon glyphicon-remove"></i> 删除
							</a></li>
						</ul>
					</div>
					<div class="btn-group btn-group-sm">
						<button id="open-search-button" type="button" class="btn btn-primary">
							<i class="fa fa-search"></i>
						</button>
						<button type="button" class="btn btn-warning" id="refresh-button">
							<i class="fa fa-refresh"></i>
						</button>
					</div>
				</div>

				<div class="box box-success" id="search-panel">
					<form id="search-form" class="form-search form-inline">
						<div class="box-body">
							<div class="form-group">
								<label for="search-title" class="control-label">标题</label> <input class="form-control" id="search-title"
									placeholder="请输入标题" name="title" type="text">
							</div>
							<div class="form-group">
								<label for="search-author" class="control-label">作者</label> <input class="form-control" id="search-author"
									placeholder="请输入作者" name="author" type="text">
							</div>
							<button type="submit" class="btn btn-primary btn-sm" id="search-button">
								<i class="fa fa-search"></i> 搜索
							</button>
						</div>
					</form>
				</div>

				<div class="box box-primary">
					<div class="box-body no-padding">
						<table id="grid-article" class="table table-hover">
							<thead>
								<tr>
									<th data-column-id="id" data-type="numeric" data-identifier="true" data-visible="false">ID</th>
									<th data-column-id="title">标题</th>
									<th data-column-id="author">作者</th>
									<th data-column-id="published" data-converter="bool">发布</th>
									<th data-formatter="commands" data-css-class="command-column" data-width="120px" data-sortable="false"
										data-align="center" data-header-align="center">操作</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>


	</section>


	<script type="text/javascript">
		requirejs(
				[ "domReady", "fancytree", "bootgrid" ],
				function(ready) {
					ready(function() {
						activeMenu("content_article");

						var $treeView = $("#tree_view");
						$treeView.fancytree({
							source : {
								url : base + "/content/articleCategory/tree",
								method : "post"
							},
							activate : function(event, data) {
								if (data.node) {
									if (data.node.data.id) {
									} else {
									}
								}
							}
						});

						var deleteRow = function(grid, ids) {
							$.confirm({
								title : "确认信息",
								content : "确定要删除吗？",
								buttons : {
									confirm : {
										text : "确定",
										action : function() {
											$.post(base + "/content/article/delete", {
												ids : ids
											}, function(resp) {
												if (resp.success) {
													$.alert({
														title : "提示",
														content : "操作成功",
														buttons : {
															ok : {
																text : "确定"
															}
														}
													});
													grid.bootgrid("reload")
												} else {
													$.alert({
														title : "提示",
														content : resp.msg,
														buttons : {
															ok : {
																text : "确定"
															}
														}
													});
												}
											}, "json");
										}
									},
									cancel : {
										text : "取消"
									}
								}
							});
						};

						var gridArticle = $("#grid-article")
								.bootgrid(
										{
											url : base + "/content/article/page",
											post : function() {
												var keyValues = $("#search-form").serialize();
												return parseQueryString(keyValues);
											},
											formatters : {
												"commands" : function(column, row) {
													return "\
			<div class=\"btn-group btn-group-sm\" data-row-id=\""+row.id+"\">\
				<a class=\"btn btn-primary\" href=\"#/page/content/article/edit/"+row.id+"\">\
					<i class=\"glyphicon glyphicon-edit\"></i>\
				</a>\
				<a aria-expanded=\"false\" aria-haspopup=\"true\" data-toggle=\"dropdown\" \
					class=\"btn btn-primary dropdown-toggle\" type=\"button\">\
					<i class=\"fa fa-cog\"></i>\
					<span class=\"ion-arrow-down-b\"></span>\
				</a>\
				<ul class=\"dropdown-menu pull-right\">\
					<li><a href=\"javascript:;\" class=\"command-delete\"><i class=\"glyphicon glyphicon-remove\"></i> 移除</a></li>\
				</ul>\
			</div>";
												}
											}
										});

						gridArticle.on("loaded.rs.jquery.bootgrid", function() {
							var $table = $(this);
							$table.find(".dropdown-toggle").dropdown();

							$table.find(".command-delete").on("click", function(e) {
								var entity_id = $(this).closest(".btn-group").data("row-id");
								deleteRow($table, [ entity_id ]);
							});
						});

						var actionWithSelectedRows = function(action) {
							var selectedRows = gridArticle.bootgrid("getSelectedRows");
							if (selectedRows && selectedRows.length > 0) {
								action(gridArticle, selectedRows);
							} else {
								$.alert({
									title : "提示",
									content : "请至少选择一个文章",
									buttons : {
										ok : {
											text : "确定"
										}
									}
								});
							}
						}
						$("#delete-button").on("click", function() {
							actionWithSelectedRows(function(grid, selectedRows) {
								deleteRow(grid, selectedRows);
							});
						});

						var refreshGrid = function() {
							gridArticle.bootgrid("reload");
						}

						$("#search-button").on("click", function() {
							refreshGrid();
							return false;
						});
						$("#refresh-button").on("click", function() {
							refreshGrid();
						});

						$("#open-search-button").on("click", function() {
							$("#search-panel").toggle('fast')
						});
					});
				});
	</script>
</body>
</html>

